<template>
 <div class="main">
  <h6>{{ $t('custody.assets.title') }}</h6>

  <p>{{ $t('custody.assets.text') }}</p>

  <ul>
   <li>
    <h6>{{ $t('custody.assets.name1') }}</h6>
    <p>{{ $t('custody.assets.text1') }}</p>
   </li>
   <li>
    <h6>{{ $t('custody.assets.name2') }}</h6>
    <p>{{ $t('custody.assets.text2') }}</p>
   </li>
   <li>
    <h6>{{ $t('custody.assets.name3') }}</h6>
    <p>{{ $t('custody.assets.text3') }}</p>
   </li>
  </ul>
 </div>
</template>

<script>
export default {
name: "Assets"
}
</script>

<style scoped lang="scss">
.main {
 display: flex;
 flex-direction: column;
 padding: 100px 0 50px;

 >h6 {
  text-align: center;
  font-size: 30px;
  padding-bottom: 20px;
  font-weight: bold;
 }
 >p {
  color: #1E1B1B;
  font-size: 18px;
  line-height: 1.5;
  width: 600px;
  margin: 0 auto 80px;
  text-align: center;
 }

 ul {
  display: flex;
  align-items: center;
  margin-bottom: 50px;
  justify-content: space-between;

  li {
   width: 32%;
   border-radius: 4px;
   min-height: 240px;
   padding: 20px 20px 40px 10px;

   h6 {
    padding-bottom: 20px;
    padding-right: 40px;
    font-weight: bold;
    font-size: 20px;
    color: #040404;
    text-align: left;
   }

   p {
    padding-right: 70px;
    color: grey;
    font-size: 13px;
   }

   &:nth-of-type(1) {
    background: #F5FAFF url('../../../../assets/icon1.png') right 20px top 20px no-repeat;
    background-size: 30px;
   }

   &:nth-of-type(2) {
    background: #F5FAFF url('../../../../assets/icon2.png') right 20px top 20px no-repeat;
       background-size: 30px;
   }

   &:nth-of-type(3) {
    background: #F5FAFF url('../../../../assets/icon3.png') right 20px top 20px no-repeat;
    background-size: 30px;
   }
  }
 }
}
</style>
